<template>
  <div>
    <el-tabs v-model="activeName">
      <el-row type="flex" justify="space-between">
        <el-col>
          <el-button type="primary" @click="clickCreat" style="width: 120px">添加</el-button>
        </el-col>
        <el-col>
          <div style="display: flex; justify-content: flex-end">
            <el-input
              @clear="clear"
              clearable
              v-model="form.search"
              style="width: 300px; margin-left: 15px"
              placeholder="搜索名称、类型"
              class="input-with-select"
            >
              <el-button
                @click="searchVal"
                slot="append"
                style="
                  background-color: #45a321;
                  color: #fff;
                  border-radius: 0;
                  border: 1px solid #45a321;
                "
              >搜索</el-button>
              <i slot="prefix-icon" class="el-icon-search"></i>
            </el-input>
          </div>
        </el-col>
      </el-row>
      <el-tab-pane label="院校" name="school">
        <el-table align="center" :data="listOne.list" border style="width: 100%; margin: 20px 0">
          <el-table-column align="center" prop="name" label="名称"></el-table-column>
          <el-table-column align="center" prop="type" label="类型"></el-table-column>
          <el-table-column align="center" prop="myorder" label="排序"></el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button class="editText" @click="clickEdit(scope.row.id)" type="text">修改</el-button>
              <el-button class="deletText" @click="deletUser(scope.row.id)" type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="listOne.page"
            :page-size="page_size"
            layout="total, prev, pager, next, jumper"
            :total="parseInt(listOne.count)"
            align="left"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="领域" name="field">
        <el-table align="center" :data="listTwo.list" border style="width: 100%; margin: 20px 0">
          <el-table-column align="center" prop="name" label="名称"></el-table-column>
          <el-table-column align="center" prop="type" label="类型"></el-table-column>
          <el-table-column align="center" prop="myorder" label="排序"></el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button class="editText" @click="clickEdit(scope.row.id)" type="text">修改</el-button>
              <el-button class="deletText" @click="deletUser(scope.row.id)" type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="listTwo.page"
            :page-size="listTwo.page_size"
            layout="total, prev, pager, next, jumper"
            :total="parseInt(listTwo.count)"
            align="left"
          ></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      title="添加标签"
      :visible.sync="dialogVisible"
      width="50%"
      top="10.8vh"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <div class="mini">
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">名称</p>
          <div class="left_w">
            <el-input v-model="form.name" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">类型</p>
          <div class="left_w">
            <el-select v-model="form.type" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.label"
                :label="item.name"
                :value="item.label"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">排序</p>
          <div class="left_w">
            <el-input v-model="form.myorder" placeholder="请输入内容"></el-input>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { VUE_APP_BASE_API } from "@/config.js";
import {
  labelList,
  labelAdd,
  labelEdit,
  labelDel,
  labelInfo,
} from "@/api/adminWeb";
import Editor from "@/components/Editor";
import activities from "./activities";
export default {
  data () {
    return {
      activeName: "school",
      VUE_APP_BASE_API,
      list: [],
      page_size: 10,
      listOne: [],
      listTwo: [],
      // activeName: 0,
      dialogVisible: false,
      form: {
        label_id: "",
        name: "",
        type: "",
        search: "",
        myorder: "",
      },
      contentDesc: "",
      clearDesc: 0,
      fileList: [],
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick (picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick (picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick (picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      options: [
        {
          label: 1,
          name: "领域",
        },
        {
          label: 2,
          name: "学院",
        },
      ],
    };
  },
  components: {
    Editor,
    activities,
  },
  mounted () {
    this.getLIst();
  },
  methods: {
    searchVal () {
      this.getLIst();
    },
    clickCreat () {
      this.dialogVisible = true;
    },
    async clickEdit (id) {
      try {
        this.form = await labelInfo({
          label_id: id,
        });
        this.contentDesc = this.form.content;
        this.dialogVisible = true;
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    deletUser (id) {
      this.$confirm("此操作将删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            await labelDel({
              label_id: id,
            });
            this.getLIst();
            this.$message({
              type: "success",
              message: "删除成功",
            });
          } catch (error) {
            this.$message.error(error.message);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    clear () {
      this.getLIst();
    },
    handleClose () {
      this.clearDesc = 1;
      this.dialogVisible = false;
      this.form = {
        name: "",
        type: "",
        myorder: "",
      };
    },
    async onSuccess (response, file, fileList) {
      if (response) {
        this.form.tpic = response.data.url;
        this.$nextTick(() => {
          this.form.tpic = response.data.url;
        });
        this.$message.success("上传成功");
      }
    },
    async getLIst () {
      try {
        this.listOne = await labelList({ type: 2, page_size: this.page_size });
        this.listTwo = await labelList({ type: 1, page_size: this.page_size });
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    descVal (val) {
      this.form.content = val;
    },
    async save () {
      try {
        const { name, type, myorder } = this.form;
        if (this.form.id) {
          await labelEdit({
            label_id: this.form.id,
            name,
            type,
            myorder,
          });
          this.getLIst();
          this.$message.success("添加成功");
          this.dialogVisible = false;
          this.clearDesc = 1;
          this.form = {
            name: "",
            type: "",
            myorder: "",
          };
        } else {
          await labelAdd({
            name,
            type,
            myorder,
          });
          this.clearDesc = 1;
          this.getLIst();
          this.$message.success("添加成功");
          this.dialogVisible = false;
          this.form = {
            name: "",
            type: "",
            myorder: "",
          };
        }
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    cancle () {
      this.dialogVisible = false;
      this.clearDesc = 1;
      this.form = {
        title: "",
        online_time: "",
        content: "",
        tpic: "",
        myorder: "",
      };
    },
    //每页下拉显示数据
    async handleSizeChange (type,size) {
      try {
        const resUser = await labelList({
          keywords: this.form.search,
          page: size,
        });
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    //点击第几页
    async handleCurrentChange (currentPage) {
      try {
        const resUser = await labelList({
          type: this.activeName == "school" ? 2 : 1,
          page: currentPage,
          page_size: this.page_size
        });
        if (this.activeName == "school") {
          this.listOne = resUser;
        } else {
          this.listTwo = resUser;
        }
      } catch (e) {
        this.$message.error(e.message);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.mini {
  height: 69.5vh;
}
.news_mrt {
  margin-bottom: 30px;
}
.left_w {
  width: 80%;
}
</style>